<template>
  <div class="discuss_container">
    <div class="discuss">
      <div class="discuss_news">
        <div class="discuss_topic">
          <el-button
            :class="[btn_active == 1 ? 'is_active' : '']"
            style="margin-left: 5px"
            type="text"
            @click="handleHotList"
            >最热</el-button
          >
          <el-button
            :class="[btn_active == 2 ? 'is_active' : '']"
            type="text"
            @click="handleNewList"
            >最新</el-button
          >
          <div class="discuss_start">
            <div class="discuss_btn">
              <el-button @click="handleAddDiscuss()"
                ><i class="el-icon-edit"></i>&nbsp;&nbsp;发起讨论</el-button
              >
            </div>
          </div>
        </div>
        <!-- 用一个div来循环 -->
        <div>
          <div
            class="discuss_debate"
            v-for="item in discussList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )"
            v-bind:key="item.id"
          >
            <div class="discuss_debates">
              <div class="discuss_announce">
                <img :src="item.userAvater" />
                <router-link
                  :to="{ path: '/discuss', query: { discussId: item.id } }"
                  ><h4 class="discuss_title">
                    {{ item.discussTitle }}
                  </h4></router-link
                >
                <div class="discuss_single">{{ item.discussTag }}</div>
              </div>
              <router-link
                :to="{ path: '/discuss', query: { discussId: item.id } }"
                ><div class="discuss_author">{{ item.discussTag }}</div>
                <p class="discuss_text" style="color:#454d59;">
                  {{ item.discussContext }}
                </p></router-link
              >
              <div class="discuss_ways">
                <el-button
                  class="discuss_funtioned icons_topics"
                  type="text"
                  size="mini"
                  @click="handleLike()"
                  ><i class="el-icon-thumb icon-la" />10</el-button
                >
                <el-button
                  class="discuss_funtioned icons_topics"
                  type="text"
                  size="mini"
                  @click="handleComment()"
                  ><i class="el-icon-chat-round" />20</el-button
                >
                <el-button
                  class="discuss_funtioned icons_topics"
                  style="font-size: 18px"
                  type="text"
                  @click="handleCollect()"
                  size="mini"
                  ><i class="el-icon-star-on" />50</el-button
                >
              </div>
            </div>
          </div>
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            layout="total,sizes, prev, pager, next, jumper"
            :total="discussList.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="discuss_related">
      <p>必读 &nbsp; &nbsp; 最新/最热</p>
      <div class="discuss_x">
        <span>排序算法</span>
        <span>排序算法</span>
        <span>排序算法</span>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/discusslist.css";
import { formatDate } from "@/utils/date";

const defaultDiscuss = [
  {
    id: 1,
    discussTitle: "提问｜有关暑期实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？3.实习时主要工资是多少，虽然实习不是很在意钱，但没达到平均总感觉心里超不爽的，暑期实习的平均工资是多少。4.暑期实习的项目经历，这个项目要做到什么地步才算好？要把springcloud那些注册中心，熔断降流什么的都用到吗，这些只是过了一遍，还没有实操经验，之前做的两个项目到前后端结合后速度明显变慢了，然后前端报错就做不下去了。5.中间件部分要求掌握到什么地步？我也只是过了一遍，跟着视频走也能做出来，到自己动手就无能为力了。就是这些啦，希望有大佬可以解解惑。",
    discussStatus: 1,
    createTime: "2022-02-21 01:13:07",
    updateTime: "2022-02-21 01:13:07",
    belongUsername: "丫丫",
    userAvater: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  },
  {
    id: 2,
    discussTitle: "提问｜有关暑期实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？3.实习时主要工资是多少，虽然实习不是很在意钱，但没达到平均总感觉心里超不爽的，暑期实习的平均工资是多少。4.暑期实习的项目经历，这个项目要做到什么地步才算好？要把springcloud那些注册中心，熔断降流什么的都用到吗，这些只是过了一遍，还没有实操经验，之前做的两个项目到前后端结合后速度明显变慢了，然后前端报错就做不下去了。5.中间件部分要求掌握到什么地步？我也只是过了一遍，跟着视频走也能做出来，到自己动手就无能为力了。就是这些啦，希望有大佬可以解解惑。",
    discussStatus: 1,
    createTime: "2022-02-21 01:13:07",
    updateTime: "2022-02-21 01:13:07",
    belongUsername: "丫丫",
    userAvater: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  },
  {
    id: 3,
    discussTitle: "提问｜有关暑期实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？3.实习时主要工资是多少，虽然实习不是很在意钱，但没达到平均总感觉心里超不爽的，暑期实习的平均工资是多少。4.暑期实习的项目经历，这个项目要做到什么地步才算好？要把springcloud那些注册中心，熔断降流什么的都用到吗，这些只是过了一遍，还没有实操经验，之前做的两个项目到前后端结合后速度明显变慢了，然后前端报错就做不下去了。5.中间件部分要求掌握到什么地步？我也只是过了一遍，跟着视频走也能做出来，到自己动手就无能为力了。就是这些啦，希望有大佬可以解解惑。",
    discussStatus: 1,
    createTime: "2022-02-21 01:13:07",
    updateTime: "2022-02-21 01:13:07",
    belongUsername: "丫丫",
    userAvater: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  },
  {
    id: 4,
    discussTitle: "提问｜有关暑期实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？3.实习时主要工资是多少，虽然实习不是很在意钱，但没达到平均总感觉心里超不爽的，暑期实习的平均工资是多少。4.暑期实习的项目经历，这个项目要做到什么地步才算好？要把springcloud那些注册中心，熔断降流什么的都用到吗，这些只是过了一遍，还没有实操经验，之前做的两个项目到前后端结合后速度明显变慢了，然后前端报错就做不下去了。5.中间件部分要求掌握到什么地步？我也只是过了一遍，跟着视频走也能做出来，到自己动手就无能为力了。就是这些啦，希望有大佬可以解解惑。",
    discussStatus: 1,
    createTime: "2022-02-21 01:13:07",
    updateTime: "2022-02-21 01:13:07",
    belongUsername: "丫丫",
    userAvater: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  },
  {
    id: 5,
    discussTitle: "提问｜有关暑期实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？3.实习时主要工资是多少，虽然实习不是很在意钱，但没达到平均总感觉心里超不爽的，暑期实习的平均工资是多少。4.暑期实习的项目经历，这个项目要做到什么地步才算好？要把springcloud那些注册中心，熔断降流什么的都用到吗，这些只是过了一遍，还没有实操经验，之前做的两个项目到前后端结合后速度明显变慢了，然后前端报错就做不下去了。5.中间件部分要求掌握到什么地步？我也只是过了一遍，跟着视频走也能做出来，到自己动手就无能为力了。就是这些啦，希望有大佬可以解解惑。",
    discussStatus: 1,
    createTime: "2022-02-21 01:13:07",
    updateTime: "2022-02-21 01:13:07",
    belongUsername: "丫丫",
    userAvater: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  },
  {
    id: 6,
    discussTitle: "提问｜有关暑期实习的问题",
    discussTag: "暑假实习",
    discussContext:
      "本人二本大三，想找个java后端方面的暑期实习。想问问一些问题。1.线上面试考算法是怎样一个形式？是说一下思路，还是要完整写出来？完整写出来的话，可不可以上网搜一些技巧？比如我打周赛时就会搜“如何去掉前缀0”，“如何实现字符串反转”等等这种可以直接调api的算法。2.实习就想在长沙周围，有没有就在长沙的中厂分厂的这些公司，我该怎么知道这些公司？3.实习时主要工资是多少，虽然实习不是很在意钱，但没达到平均总感觉心里超不爽的，暑期实习的平均工资是多少。4.暑期实习的项目经历，这个项目要做到什么地步才算好？要把springcloud那些注册中心，熔断降流什么的都用到吗，这些只是过了一遍，还没有实操经验，之前做的两个项目到前后端结合后速度明显变慢了，然后前端报错就做不下去了。5.中间件部分要求掌握到什么地步？我也只是过了一遍，跟着视频走也能做出来，到自己动手就无能为力了。就是这些啦，希望有大佬可以解解惑。",
    discussStatus: 1,
    createTime: "2022-02-21 01:13:07",
    updateTime: "2022-02-21 01:13:07",
    belongUsername: "丫丫",
    userAvater: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  },
];

export default {
  name: "discuss",
  data() {
    return {
      discussInfo: Object.assign({}, defaultDiscuss),
      discussList: [],
      btn_active: 1,
      currentPage: 1,
      pageSize: 10,
    };
  },
  // 有一个过滤器（）
  filters: {
    // 格式化时间
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      //   这个就是格式化时间的方法（"yyyy-MM-dd"这个是格式可以是很多种（MM-dd）等等）
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  created() {
    this.getDiscuss();
  },
  methods: {
    getDiscuss() {
      this.discussInfo = defaultDiscuss;
      this.discussList = defaultDiscuss;
    },
    handleLike() {
      console.log("点赞");
    },
    handleComment() {
      console.log("评论数量");
    },
    handleCollect() {
      console.log("收藏");
    },
    // 点击搜索按钮
    // searchClick() {},
    handleAddDiscuss() {
      console.log("增加讨论");
    },
    handleNewList() {
      console.log("最新列表");
    },
    handleHotList() {
      console.log("热列表");
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style></style>
